<template>
    <common-card title="累计用户数" :value="`${usersTotal as number}`">
      <v-chart :option="getOption()" autoresize />
      <template v-slot:bottom>
        <div class="total-users-bottom">
          <div>日同比</div>
          <div class="emphasis">{{ userGrowthLastDay }}%</div>
          <div class="increment"></div>
          <div class="right">月同比</div>
          <div class="emphasis">{{ userGrowthLastMonth }}%</div>
          <div class="decrement"></div>
        </div>
      </template>
    </common-card>
  </template>
  
  <script lang="ts">
  export default {
    name: "TotalUsers",
  };
  </script>
  
  <script lang="ts" setup>
  import CommonCard from "./CommonCard.vue";
  import  {useDataStore } from "@/stores/reportData";
  import { computed } from "@vue/reactivity";
  
  const dataStore = useDataStore();
  
  const usersTotal = computed(() => dataStore.reportData.usersTotal);
  const usersLastMonth = computed(() => dataStore.reportData.usersLastMonth);
  const userGrowthLastDay = computed(
    () => dataStore.reportData.userGrowthLastDay
  );
  const userGrowthLastMonth = computed(
    () => dataStore.reportData.userGrowthLastMonth
  );
  
  const getOption = () => {
    return {
      xAxis: {
        // 去掉两边留白
        boundaryGap: false,
        // 不显示
        show: false,
  
        //如果是一个进度条类似的图,没有x轴数据,我们可以使用min和max来限定x的起始和结束
        min: 0, // x轴最小值
        max: usersTotal.value, // x轴最大值
      },
      yAxis: {
        // y轴为类目轴 => 水平柱状图
        type: "category",
        show: false, // 不显示y轴
      },
      //图标配置
      series: {
        name: "用户增长量",
        type: "bar",
        //就一个数据,x轴展示的是所有的用户数,data这里展示的,上个月访问的用户数
        data: [(usersTotal.value as number) - (usersLastMonth.value as number)],
        // 柱条的宽度
        barWidth: 10,
  
        // 展示背景(进度条拉满一个灰色的低)
        showBackground: true,
        // 背景样式
        backgroundStyle: {
          // 背景色
          color: "blue",
        },
  
        // 柱条样式
        itemStyle: {
          color: "yellow",
        },
  
        // 柱条显示的内容
        label: {
          show: true, // 默认显示当前柱的数据
          formatter: "yangyang", // 显示的自定义内容
          position: "right", // 内容的位置
          color: "#fff", // 颜色
        },
      },
      grid: {
        left: 0,
        top: 0,
        bottom: 0,
        right: 0,
      },
      // 显示提示
      tooltip: {
        // formatter (params) {
        //   // console.log(params)
        //   const {seriesName, marker, value} = params
        //   return `${seriesName}<br>${marker}${value}`
        // },
        trigger: "axis",
      },
    };
  };
  </script>
  
  <style lang="scss" scoped>
  .total-users-bottom {
    display: flex;
    align-items: center;
  
    .right {
      margin-left: 10px;
    }
  }
  </style>
  